<template>
    <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
    >
        <el-form-item label="供应商" prop="supplierId">
            <el-select v-model="ruleForm.supplierId" placeholder="请选择供应商">
                <el-option
                    v-for="item in optionsList"
                    :key="item.index"
                    :label="item.name"
                    :value="item._id"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="货品" prop="goodsId">
            <el-select v-model="ruleForm.goodsId" placeholder="选择货品" @change="change()">
                <el-option
                    v-for="item in listData"
                    :key="item.index"
                    :label="item.name"
                    :value="item._id"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="数量" prop="number">
            <el-input v-model="ruleForm.number" @change="changT()"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
            <el-input v-model="ruleForm.price"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import { getListAll, getListAllOne } from '../../../api/supplier';
import { mapActions, mapState, mapMutations } from 'vuex';
import Axios from 'axios';
export default {
    data() {
        return {
            optionsList: [],
            ruleForm: {
                supplierId: '',
                goodsId: '',
                number: '',
                price: '',
                unitprice: ''
            }
        };
    },
    created() {
        this.getList();
        this.show();
    },
    computed: {
        ...mapState('supGoods', ['listData', 'ruleForm'])
    },
    methods: {
        ...mapActions('supGoods', ['show']),
        async change() {
            const _id = this.ruleForm.goodsId;
            const data = await getListAllOne(_id);
            this.ruleForm.price = data[0].price;
            this.ruleForm.unitprice = data[0].price;
        },
        async changT() {
            const number = this.ruleForm.number;
            const unitprice = this.ruleForm.unitprice;

            this.ruleForm.price = number * unitprice;
            console.log(this.ruleForm.price);
        },
        submitForm(formName) {
            Axios({
                method: 'post',
                url: '/api/supplier/selectSuppliers',
                data: {
                    supplierId: this.ruleForm.supplierId,
                    goodsId: this.ruleForm.goodsId,
                    number: this.ruleForm.number,
                    price: this.ruleForm.price
                }
            }).then(res => {
                console.log(res);
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        async getList() {
            const data = await getListAll();
            this.optionsList = data.rows;
        }
    }
};
</script>

<style>
</style>